.selectDown {
  position: relative;
  display: inline-block;
  border: 1px solid #ddd;
  line-height: 1.7;
  // height: 1.7em;
  width: 10em;
  background-color: #fff;
  transition: height 1s;
  box-sizing: content-box;

  span {
    display: inline-block;
    padding: .3em .5em;
    // height: 1.7em;
    line-height: 1.7;
    width: 10em;
    cursor: pointer;
    &::after {
      content: '';
      position: absolute;
      top: 50%;
      right: .5em;
      border: .5em solid transparent;
      border-top: .5em solid #ddd;
      transform: translateY(-25%);
    }
    &.disabled {
      &::after {
        content: none;
      }
    }
  }
  ul {
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    display: none;
    box-shadow: 0px 0px 1px 1px #ddd;
    background-color: #fff;
    & > li {
      padding: .3em .5em;
      // height: 1.7em;
      line-height: 1.7;
      cursor: pointer;
      &:hover {
        background-color: #ddd;
      }
    }
  }
  ul.open {
    display: block;
  }
  &.open {
    span {
      &::after {
        border: .5em solid transparent;
        border-bottom: .5em solid #ddd;
        transform: translateY(-75%);
      }
    }
  }
}
